<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看设备</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" href="/sui/css/sm.min.css">
    <link rel="stylesheet" href="/sui/css/sm-extend.min.css">
    <style>
        .no-data .no-record{
            margin: 0 auto;
            margin-top:1.3867rem;
            width: 3.7333rem;
            height:3.44rem;
            background-image: url(/image/no-project@2x.png);
            background-repeat: no-repeat;
            background-size:cover;
        }
        .no-data .wenzi{
            text-align: center;
            margin-top:0.5333rem;
            color: #666666;
            font-size: 0.4rem;
        }
    </style>
</head>
<body>
<div class="page-group">

    <div class="page">

        <header class="bar bar-nav" >
            <a href="/enterprise_user/user_detail"  class="external icon icon-left pull-left"  style="font-size:unset!important;line-height: unset!important;">
                返回
            </a>
            <h1 class="title">查看设备</h1>
            <button class="button pull-right open-add-popup" id="save_btn">
                添加设备
            </button>
        </header>

        <!--content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100" data-ptr-distance="55" >

            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>


            <div class="list-block cards-list" >
                <ul>

                </ul>
            </div>
            <div class="list-block ">
                <div class="no-data" style="display: none;height:calc(100vh - 5.7rem);overflow: hidden">
                    <div class="no-record"></div>
                    <div class="wenzi">
                        <span>当前暂无记录</span>
                    </div>
                </div>
            </div>

            <div class="infinite-scroll-preloader"  style="display:none">
                <div class="preloader"></div>
            </div>

        </div>

     </div>
     <div class="popup add-popup" style="background-color: #efeff4!important;">

            <!--<p><a href="#" class="close-popup"><i style="display:block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 "></i></a></p>-->
            <header class="bar bar-nav" style="line-height: 2.2rem">
                <a href="javascript:;" class="close-popup"  style="font-size:unset!important;line-height: unset!important;vertical-align: middle">
                    <i style="display:inline-block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 0.5rem;vertical-align: middle"></i><span style="vertical-align: middle;color: #000000">添加商户</span>
                </a>
            </header>
            <form id="add-form" onsubmit="return false" >
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">登录用户</div>
                                    <div class="item-input">
                                        <input type="text" name="userName" placeholder="请输入登录用户名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号</div>
                                    <div class="item-input">
                                        <input type="text" name="mobile" placeholder="请输入手机号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="profit-allocate">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">分润</div>
                                    <div class="item-input">
                                        <select id="profit-select"  >

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-50"><a href="#" class="button button-big button-fill button-danger">重置</a></div>
                        <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
                    </div>
                </div>
            </form>
            <!-- 单个page ,第一个.page默认被展示-->

        </div>
     <div class="popup edit-popup" style="background-color: #efeff4!important;">

    <!--<p><a href="#" class="close-popup"><i style="display:block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 "></i></a></p>-->
    <header class="bar bar-nav" style="line-height: 2.2rem">
        <a href="javascript:;" class="close-popup"  style="font-size:unset!important;line-height: unset!important;vertical-align: middle">
            <i style="display:inline-block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 0.5rem;vertical-align: middle"></i><span style="vertical-align: middle;color: #000000">编辑分润</span>
        </a>
    </header>
    <form id="edit-form" onsubmit="return false" >
        <div class="list-block">
            <ul>
                <li style="display: none">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label"></div>
                            <div class="item-input">
                                <input  type="text" name="id" >
                            </div>
                        </div>
                    </div>
                </li>

                <!-- Text inputs -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">分润名称</div>
                            <div class="item-input">
                                <input type="text" placeholder="请输入名称" name="profitName">
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">分润返还(百分比)</div>
                            <div class="item-input">
                                <input type="text" placeholder="请输入消费分佣" name="profitReturn">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block">
            <div class="row">
                <div class="col-50"><a href="#" class="button button-big button-fill button-danger">重置</a></div>
                <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
            </div>
        </div>

    </form>
    <!-- 单个page ,第一个.page默认被展示-->

</div>
</div>


</body>
</html>
<script type='text/javascript' src='/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm-extend.min.js' charset='utf-8'></script>
<script>
    var pageNo=1;
    var pageSize=10;
    // 上次加载的序号
    var lastIndex = 0;
    // 加载flag
    var loading = false;
    //最大加载数量
    var maxItems=0;

    $(document).ready(function () {

        refreshPage(pageNo,pageSize);
    })

    //刷新页面
    function refreshPage(pageNo, pageSize){
        addItems(pageNo, pageSize);
    }

    function addItems(pageNo, pageSize) {
        var param={pageNo:pageNo,pageSize:pageSize};
        console.log(param);
        // 生成新条目的HTML
        $.ajax({
            "url": "/agency_mch_terminal/queryData",
            "type": "POST",
            async:false,
            data:param,
            success:function (result) {
                console.log(result);
                maxItems=result.recordsTotal;
                var data=result.data;

                if(data.length==0){

                    $(".no-data").css('display','block');
                    return;
                }else{
                    $(".no-data").css('display','none');
                }
                for(var i=0;i<data.length;i++) {
                    var profit_info =data[i];
                    var html = '';
                    html+= '<li class="card">' +
                        '<div class="card-header">'+
                        // '<div style="vertical-align: center;">'+
                        // '<i style="display: inline-flex;width:44px;height:44px;background-image: url(/image/income/touxiang.svg);background-position: center center;background-size: 44px 44px;margin-right:0.7rem;vertical-align: middle "></i>'+
                        '<span class="profitName">'+profit_info.name+'</span>'+
                        // '</div>'+
                        '<a  href="javascript:;" class="open-edit-popup"  data-id='+ profit_info.id+'>'+'编辑'+'</a>'+
                        '</div>' +
                        '<div class="card-content">' +
                        '<div class="item-content">'+
                        '<div class="item-inner" >'+

                        '<span style="font-size: 0.85rem" >'+'分润返还(百分比)'+
                        '</span>'+
                        '<span class="profitReturn">'+
                        profit_info.consumeProfit +
                        '</span>'+
                        '</div>'+
                        '</div>'+
                        '</div>' +
                        '<div class="card-footer">'+
                        '<span style="font-size: 0.85rem" class="createdTime">'+'创建时间'+'</span>'+
                        '<span>'+data[i].createdTime+'</span>' +
                        '</div>' +
                        '</li>';
                    $('.cards-list ul ').append(html);
                }
                lastIndex = $('.card').length;
                loading=false;
            }
        })
    };
</script>